<template>
        <div>
        显示数据：{{username}}---{{password}}
    </div>
            <div>
                用户名：<input type="text" v-model="username">
            </div>
            <div>
                密码：<input type="password" v-model="formData.password">
            </div>
    
            
            <div>
                <button @click="login">登录</button>
            </div>
    </template>
    <script setup>
    //表单绑定 v-model只能使用在表单元素上
    //什么是双向数据绑定 视图更新之后数据会随之改变 数据发生变化视图也会更新
    
    import{ref} from 'vue'
    
    let username = ref('')
    let password = ref('')
    
    let formData = ({
        username:'',
        password:'',
        gender:'',
        age:''
    })
    
    const login = ()=>{
        console.log(username.value,password.value,'实现登录');
    }
    </script>
    <style scoped>
    </style>
